<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>创建群组 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 通用样式变量 */
    :root {
      --primary: #4263EB;
      --primary-light: #E8F0FE;
      --secondary: #6B7280;
      --success: #10B981;
      --warning: #FBBF24;
      --danger: #EF4444;
      --light: #F3F4F6;
      --dark: #1F2937;
      --white: #FFFFFF;
      --gray: #9CA3AF;
      --border: #E5E7EB;
      --shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #F9FAFB;
      color: var(--dark);
      margin: 0;
      height: 100vh;
      overflow-x: hidden;
    }
    
    /* 页面容器 */
    .create-group-container {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    /* 顶部导航 */
    .page-header {
      background-color: var(--white);
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border);
      position: relative;
      z-index: 10;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--dark);
      font-size: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .header-btn.text-btn {
      font-size: 16px;
      width: auto;
      height: auto;
      color: var(--primary);
      font-weight: 500;
    }
    
    /* 内容区域 */
    .page-content {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }
    
    /* 步骤指示器 */
    .steps-indicator {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      position: relative;
    }
    
    .steps-indicator::before {
      content: '';
      position: absolute;
      top: 15px;
      left: 24px;
      right: 24px;
      height: 2px;
      background-color: var(--border);
      z-index: 1;
    }
    
    .step-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 2;
      width: 33.333%;
    }
    
    .step-number {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: var(--light);
      color: var(--gray);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 8px;
    }
    
    .step-item.active .step-number {
      background-color: var(--primary);
      color: white;
    }
    
    .step-item.completed .step-number {
      background-color: var(--success);
      color: white;
    }
    
    .step-title {
      font-size: 12px;
      color: var(--gray);
    }
    
    .step-item.active .step-title,
    .step-item.completed .step-title {
      color: var(--dark);
      font-weight: 500;
    }
    
    /* 表单样式 */
    .form-section {
      display: none;
    }
    
    .form-section.active {
      display: block;
      animation: fadeIn 0.3s;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    .form-label {
      display: block;
      font-size: 14px;
      color: var(--secondary);
      margin-bottom: 6px;
      font-weight: 500;
    }
    
    .form-control {
      width: 100%;
      padding: 12px 14px;
      border-radius: 8px;
      border: 1px solid var(--border);
      font-size: 16px;
      background-color: var(--white);
    }
    
    .form-control:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(66, 99, 235, 0.1);
    }
    
    textarea.form-control {
      min-height: 100px;
      resize: vertical;
    }
    
    .form-hint {
      font-size: 12px;
      color: var(--gray);
      margin-top: 6px;
    }
    
    /* 群组图标选择 */
    .group-icon-selector {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 10px;
    }
    
    .icon-option {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      cursor: pointer;
      transition: all 0.2s;
      border: 2px solid transparent;
    }
    
    .icon-option.selected {
      border-color: var(--primary);
    }
    
    .upload-icon {
      background-color: var(--light);
      color: var(--gray);
    }
    
    /* 联系人选择 */
    .contact-filter {
      position: relative;
      margin-bottom: 16px;
    }
    
    .contact-filter input {
      padding-left: 40px;
    }
    
    .filter-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--gray);
    }
    
    .contact-list {
      margin-top: 10px;
    }
    
    .contact-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }
    
    .contact-item:last-child {
      border-bottom: none;
    }
    
    .contact-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
    }
    
    .contact-info {
      flex: 1;
    }
    
    .contact-name {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .contact-desc {
      font-size: 12px;
      color: var(--gray);
    }
    
    .custom-checkbox {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      border: 2px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .custom-checkbox.checked {
      background-color: var(--primary);
      border-color: var(--primary);
      color: white;
    }
    
    /* 权限选择 */
    .permission-option {
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .permission-option.selected {
      border-color: var(--primary);
      background-color: var(--primary-light);
    }
    
    .permission-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 6px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .permission-desc {
      font-size: 14px;
      color: var(--secondary);
    }
    
    /* 按钮样式 */
    .btn {
      padding: 12px 0;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      border: none;
      width: 100%;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-primary:hover {
      background-color: #3652d2;
    }
    
    .btn-secondary {
      background-color: var(--light);
      color: var(--dark);
    }
    
    .btn-secondary:hover {
      background-color: #E5E7EB;
    }
    
    .btn-text {
      background: none;
      color: var(--primary);
      padding: 8px 0;
    }
    
    .btn-group {
      display: flex;
      gap: 12px;
      margin-top: 20px;
    }
    
    /* 风格切换器 */
    .style-switcher {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1001;
      background: white;
      border-radius: 20px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    
    .style-btn {
      border: none;
      background: none;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .style-btn.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 成功弹窗 */
    .success-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
    }
    
    .success-modal.active {
      opacity: 1;
      visibility: visible;
    }
    
    .modal-content {
      background-color: var(--white);
      border-radius: 16px;
      width: 85%;
      max-width: 320px;
      padding: 30px 20px;
      text-align: center;
      transform: translateY(20px);
      transition: transform 0.3s;
    }
    
    .success-modal.active .modal-content {
      transform: translateY(0);
    }
    
    .success-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background-color: rgba(16, 185, 129, 0.1);
      color: var(--success);
      font-size: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
    }
    
    .modal-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    
    .modal-message {
      font-size: 14px;
      color: var(--secondary);
      margin-bottom: 24px;
    }
    
    /* 顶部提示 */
    .toast {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(-100px);
      background-color: var(--dark);
      color: white;
      padding: 10px 16px;
      border-radius: 8px;
      font-size: 14px;
      z-index: 1000;
      transition: transform 0.3s;
    }
    
    .toast.active {
      transform: translateX(-50%) translateY(0);
    }
    
    /* 风格1：默认蓝 */
    #style1 .btn-primary {
      background-color: var(--primary);
    }
    
    /* 风格2：卡片式 */
    #style2 {
      --shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    
    #style2 body {
      background-color: #F0F2F5;
    }
    
    #style2 .page-header {
      background-color: transparent;
      border-bottom: none;
      padding: 16px 20px;
    }
    
    #style2 .form-section {
      background-color: var(--white);
      border-radius: 16px;
      padding: 20px;
      box-shadow: var(--shadow);
    }
    
    #style2 .steps-indicator {
      padding: 0 10px;
    }
    
    #style2 .icon-option {
      border-radius: 10px;
    }
    
    #style2 .permission-option {
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    /* 风格3：深色模式 */
    #style3 {
      --dark: #F3F4F6;
      --white: #1F2937;
      --border: #374151;
      --gray: #9CA3AF;
      --light: #374151;
      --primary-light: #2D3748;
    }
    
    #style3 body {
      background-color: #111827;
      color: var(--dark);
    }
    
    #style3 .page-header,
    #style3 .form-control,
    #style3 .form-section,
    #style3 .modal-content,
    #style3 .upload-icon,
    #style3 .permission-option {
      background-color: var(--white);
    }
    
    #style3 .form-label,
    #style3 .form-hint,
    #style3 .contact-desc,
    #style3 .permission-desc,
    #style3 .modal-message {
      color: var(--gray);
    }
    
    #style3 .btn-secondary,
    #style3 .icon-option:not(.selected) {
      background-color: var(--light);
      color: var(--dark);
    }
    
    #style3 .toast {
      background-color: rgba(255,255,255,0.8);
      color: var(--dark);
    }
    
    #style3 .step-item.active .step-title,
    #style3 .step-item.completed .step-title {
      color: var(--white);
    }
    
    /* 风格4：简约风 */
    #style4 {
      --primary: #374151;
      --primary-light: rgba(55, 65, 81, 0.1);
    }
    
    #style4 .page-content {
      padding: 12px;
    }
    
    #style4 .steps-indicator {
      margin-bottom: 20px;
    }
    
    #style4 .form-group {
      margin-bottom: 16px;
    }
    
    #style4 .form-control {
      padding: 10px 12px;
      font-size: 15px;
    }
    
    #style4 .btn {
      padding: 10px 0;
      font-size: 15px;
    }
    
    #style4 .icon-option {
      width: 50px;
      height: 50px;
      font-size: 20px;
    }
    
    #style4 .permission-option {
      padding: 14px;
    }
    
    #style4 .permission-title {
      font-size: 15px;
    }
    
    #style4 .permission-desc {
      font-size: 13px;
    }
  </style>
</head>
<body>
  <!-- 风格切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="style1">风格1</button>
    <button class="style-btn" data-style="style2">风格2</button>
    <button class="style-btn" data-style="style3">风格3</button>
    <button class="style-btn" data-style="style4">风格4</button>
  </div>
  
  <!-- 页面容器 -->
  <div class="create-group-container">
    <!-- 风格1：默认蓝 -->
    <div id="style1" class="page-style active">
      <!-- 顶部导航 -->
      <div class="page-header">
        <button class="header-btn" id="backBtn1">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">创建群组</h1>
        <button class="header-btn text-btn" id="skipBtn1">跳过</button>
      </div>
      
      <!-- 内容区域 -->
      <div class="page-content">
        <!-- 步骤指示器 -->
        <div class="steps-indicator">
          <div class="step-item active" data-step="1">
            <div class="step-number">1</div>
            <div class="step-title">群组信息</div>
          </div>
          <div class="step-item" data-step="2">
            <div class="step-number">2</div>
            <div class="step-title">添加成员</div>
          </div>
          <div class="step-item" data-step="3">
            <div class="step-number">3</div>
            <div class="step-title">群组权限</div>
          </div>
        </div>
        
        <!-- 第一步：群组信息 -->
        <div class="form-section active" id="section1-1">
          <div class="form-group">
            <label class="form-label">群组名称</label>
            <input type="text" class="form-control" placeholder="输入群组名称">
            <div class="form-hint">最多20个字符</div>
          </div>
          
          <div class="form-group">
            <label class="form-label">群组图标</label>
            <div class="group-icon-selector">
              <div class="icon-option selected" style="background-color: #E8F0FE; color: #4263EB;">
                <i class="fa fa-users"></i>
              </div>
              <div class="icon-option" style="background-color: #FEF3C7; color: #D97706;">
                <i class="fa fa-briefcase"></i>
              </div>
              <div class="icon-option" style="background-color: #E0E7FF; color: #6366F1;">
                <i class="fa fa-graduation-cap"></i>
              </div>
              <div class="icon-option" style="background-color: #DBEAFE; color: #2563EB;">
                <i class="fa fa-music"></i>
              </div>
              <div class="icon-option" style="background-color: #D1FAE5; color: #059669;">
                <i class="fa fa-futbol-o"></i>
              </div>
              <div class="icon-option upload-icon">
                <i class="fa fa-upload"></i>
              </div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">群组简介</label>
            <textarea class="form-control" placeholder="描述这个群组的用途和规则"></textarea>
            <div class="form-hint">最多100个字符</div>
          </div>
          
          <div class="btn-group">
            <button class="btn btn-secondary" disabled>上一步</button>
            <button class="btn btn-primary next-step" data-next="2">
              <span>下一步</span>
              <i class="fa fa-arrow-right"></i>
            </button>
          </div>
        </div>
        
        <!-- 第二步：添加成员 -->
        <div class="form-section" id="section1-2">
          <div class="contact-filter">
            <i class="fa fa-search filter-icon"></i>
            <input type="text" class="form-control" placeholder="搜索联系人">
          </div>
          
          <div class="contact-list">
            <div class="contact-item">
              <img src="https://picsum.photos/100/100?random=1" alt="头像" class="contact-avatar">
              <div class="contact-info">
                <div class="contact-name">张小明</div>
                <div class="contact-desc">产品设计师</div>
              </div>
              <div class="custom-checkbox">
                <i class="fa fa-check" style="display: none;"></i>
              </div>
            </div>
            
            <div class="contact-item">
              <img src="https://picsum.photos/100/100?random=2" alt="头像" class="contact-avatar">
              <div class="contact-info">
                <div class="contact-name">王芳</div>
                <div class="contact-desc">UI设计师</div>
              </div>
              <div class="custom-checkbox">
                <i class="fa fa-check" style="display: none;"></i>
              </div>
            </div>
            
            <div class="contact-item">
              <img src="https://picsum.photos/100/100?random=3" alt="头像" class="contact-avatar">
              <div class="contact-info">
                <div class="contact-name">李华</div>
                <div class="contact-desc">前端开发</div>
              </div>
              <div class="custom-checkbox checked">
                <i class="fa fa-check"></i>
              </div>
            </div>
            
            <div class="contact-item">
              <img src="https://picsum.photos/100/100?random=4" alt="头像" class="contact-avatar">
              <div class="contact-info">
                <div class="contact-name">赵伟</div>
                <div class="contact-desc">后端开发</div>
              </div>
              <div class="custom-checkbox checked">
                <i class="fa fa-check"></i>
              </div>
            </div>
            
            <div class="contact-item">
              <img src="https://picsum.photos/100/100?random=5" alt="头像" class="contact-avatar">
              <div class="contact-info">
                <div class="contact-name">陈静</div>
                <div class="contact-desc">项目经理</div>
              </div>
              <div class="custom-checkbox">
                <i class="fa fa-check" style="display: none;"></i>
              </div>
            </div>
          </div>
          
          <div class="btn-group">
            <button class="btn btn-secondary prev-step" data-prev="1">
              <i class="fa fa-arrow-left"></i>
              <span>上一步</span>
            </button>
            <button class="btn btn-primary next-step" data-next="3">
              <span>下一步</span>
              <i class="fa fa-arrow-right"></i>
            </button>
          </div>
        </div>
        
        <!-- 第三步：群组权限 -->
        <div class="form-section" id="section1-3">
          <div class="form-group">
            <label class="form-label">群组类型</label>
            
            <div class="permission-option selected">
              <div class="permission-title">
                <span>公开群组</span>
                <i class="fa fa-check-circle" style="color: var(--primary);"></i>
              </div>
              <div class="permission-desc">任何人可以查看和加入，适合公开讨论和分享</div>
            </div>
            
            <div class="permission-option">
              <div class="permission-title">
                <span>私有群组</span>
                <i class="fa fa-check-circle" style="color: var(--primary); display: none;"></i>
              </div>
              <div class="permission-desc">仅邀请可加入，适合团队内部或私密交流</div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">内容权限</label>
            
            <div class="permission-option selected">
              <div class="permission-title">
                <span>所有成员可发言</span>
                <i class="fa fa-check-circle" style="color: var(--primary);"></i>
              </div>
              <div class="permission-desc">允许所有群成员发布内容和参与讨论</div>
            </div>
            
            <div class="permission-option">
              <div class="permission-title">
                <span>仅管理员可发言</span>
                <i class="fa fa-check-circle" style="color: var(--primary); display: none;"></i>
              </div>
              <div class="permission-desc">只有管理员可以发布内容，适合通知类群组</div>
            </div>
          </div>
          
          <div class="btn-group">
            <button class="btn btn-secondary prev-step" data-prev="2">
              <i class="fa fa-arrow-left"></i>
              <span>上一步</span>
            </button>
            <button class="btn btn-primary" id="createBtn1">
              <i class="fa fa-check"></i>
              <span>创建群组</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格2：卡片式 -->
    <div id="style2" class="page-style">
      <!-- 结构与风格1相同，样式由CSS控制 -->
      <div class="page-header">
        <button class="header-btn" id="backBtn2">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">创建群组</h1>
        <button class="header-btn text-btn" id="skipBtn2">跳过</button>
      </div>
      
      <div class="page-content">
        <div class="steps-indicator">
          <div class="step-item active" data-step="1">
            <div class="step-number">1</div>
            <div class="step-title">群组信息</div>
          </div>
          <div class="step-item" data-step="2">
            <div class="step-number">2</div>
            <div class="step-title">添加成员</div>
          </div>
          <div class="step-item" data-step="3">
            <div class="step-number">3</div>
            <div class="step-title">群组权限</div>
          </div>
        </div>
        
        <div class="form-section active" id="section2-1">
          <!-- 内容与风格1相同 -->
          <div class="form-group">
            <label class="form-label">群组名称</label>
            <input type="text" class="form-control" placeholder="输入群组名称">
            <div class="form-hint">最多20个字符</div>
          </div>
          
          <div class="form-group">
            <label class="form-label">群组图标</label>
            <div class="group-icon-selector">
              <div class="icon-option selected" style="background-color: #E8F0FE; color: #4263EB;">
                <i class="fa fa-users"></i>
              </div>
              <div class="icon-option" style="background-color: #FEF3C7; color: #D97706;">
                <i class="fa fa-briefcase"></i>
              </div>
              <div class="icon-option upload-icon">
                <i class="fa fa-upload"></i>
              </div>
            </div>
          </div>
          
          <div class="btn-group">
            <button class="btn btn-secondary" disabled>上一步</button>
            <button class="btn btn-primary next-step" data-next="2">
              <span>下一步</span>
              <i class="fa fa-arrow-right"></i>
            </button>
          </div>
        </div>
        
        <div class="form-section" id="section2-2">
          <!-- 内容与风格1相同 -->
          <div class="contact-filter">
            <i class="fa fa-search filter-icon"></i>
            <input type="text" class="form-control" placeholder="搜索联系人">
          </div>
          
          <div class="contact-list">
            <div class="contact-item">
              <img src="https://picsum.photos/100/100?random=1" alt="头像" class="contact-avatar">
              <div class="contact-info">
                <div class="contact-name">张小明</div>
                <div class="contact-desc">产品设计师</div>
              </div>
              <div class="custom-checkbox">
                <i class="fa fa-check" style="display: none;"></i>
              </div>
            </div>
            
            <div class="contact-item">
              <img src="https://picsum.photos/100/100?random=3" alt="头像" class="contact-avatar">
              <div class="contact-info">
                <div class="contact-name">李华</div>
                <div class="contact-desc">前端开发</div>
              </div>
              <div class="custom-checkbox checked">
                <i class="fa fa-check"></i>
              </div>
            </div>
          </div>
          
          <div class="btn-group">
            <button class="btn btn-secondary prev-step" data-prev="1">
              <i class="fa fa-arrow-left"></i>
              <span>上一步</span>
            </button>
            <button class="btn btn-primary next-step" data-next="3">
              <span>下一步</span>
              <i class="fa fa-arrow-right"></i>
            </button>
          </div>
        </div>
        
        <div class="form-section" id="section2-3">
          <!-- 内容与风格1相同 -->
          <div class="form-group">
            <label class="form-label">群组类型</label>
            
            <div class="permission-option selected">
              <div class="permission-title">
                <span>公开群组</span>
                <i class="fa fa-check-circle" style="color: var(--primary);"></i>
              </div>
              <div class="permission-desc">任何人可以查看和加入</div>
            </div>
            
            <div class="permission-option">
              <div class="permission-title">
                <span>私有群组</span>
                <i class="fa fa-check-circle" style="color: var(--primary); display: none;"></i>
              </div>
              <div class="permission-desc">仅邀请可加入</div>
            </div>
          </div>
          
          <div class="btn-group">
            <button class="btn btn-secondary prev-step" data-prev="2">
              <i class="fa fa-arrow-left"></i>
              <span>上一步</span>
            </button>
            <button class="btn btn-primary" id="createBtn2">
              <i class="fa fa-check"></i>
              <span>创建群组</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格3：深色模式 -->
    <div id="style3" class="page-style">
      <!-- 结构与风格1相同，样式由CSS控制 -->
      <div class="page-header">
        <button class="header-btn" id="backBtn3">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">创建群组</h1>
        <button class="header-btn text-btn" id="skipBtn3">跳过</button>
      </div>
      
      <div class="page-content">
        <div class="steps-indicator">
          <div class="step-item active" data-step="1">
            <div class="step-number">1</div>
            <div class="step-title">群组信息</div>
          </div>
          <div class="step-item" data-step="2">
            <div class="step-number">2</div>
            <div class="step-title">添加成员</div>
          </div>
          <div class="step-item" data-step="3">
            <div class="step-number">3</div>
            <div class="step-title">群组权限</div>
          </div>
        </div>
        
        <div class="form-section active" id="section3-1">
          <!-- 内容与风格1相同 -->
          <div class="form-group">
            <label class="form-label">群组名称</label>
            <input type="text" class="form-control" placeholder="输入群组名称">
            <div class="form-hint">最多20个字符</div>
          </div>
          
          <div class="form-group">
            <label class="form-label">群组简介</label>
            <textarea class="form-control" placeholder="描述这个群组的用途和规则"></textarea>
          </div>
          
          <div class="btn-group">
            <button class="btn btn-secondary" disabled>上一步</button>
            <button class="btn btn-primary next-step" data-next="2">
              <span>下一步</span>
              <i class="fa fa-arrow-right"></i>
            </button>
          </div>
        </div>
        
        <div class="form-section" id="section3-2">
          <!-- 内容与风格1相同 -->
          <div class="contact-filter">
            <i class="fa fa-search filter-icon"></i>
            <input type="text" class="form-control" placeholder="搜索联系人">
          </div>
          
          <div class="contact-list">
            <div class="contact-item">
              <img src="https://picsum.photos/100/100?random=1" alt="头像" class="contact-avatar">
              <div class="contact-info">
                <div class="contact-name">张小明</div>
                <div class="contact-desc">产品设计师</div>
              </div>
              <div class="custom-checkbox">
                <i class="fa fa-check" style="display: none;"></i>
              </div>
            </div>
            
            <div class="contact-item">
              <img src="https://picsum.photos/100/100?random=2" alt="头像" class="contact-avatar">
              <div class="contact-info">
                <div class="contact-name">王芳</div>
                <div class="contact-desc">UI设计师</div>
              </div>
              <div class="custom-checkbox">
                <i class="fa fa-check" style="display: none;"></i>
              </div>
            </div>
          </div>
          
          <div class="btn-group">
            <button class="btn btn-secondary prev-step" data-prev="1">
              <i class="fa fa-arrow-left"></i>
              <span>上一步</span>
            </button>
            <button class="btn btn-primary next-step" data-next="3">
              <span>下一步</span>
              <i class="fa fa-arrow-right"></i>
            </button>
          </div>
        </div>
        
        <div class="form-section" id="section3-3">
          <!-- 内容与风格1相同 -->
          <div class="form-group">
            <label class="form-label">内容权限</label>
            
            <div class="permission-option selected">
              <div class="permission-title">
                <span>所有成员可发言</span>
                <i class="fa fa-check-circle" style="color: var(--primary);"></i>
              </div>
              <div class="permission-desc">允许所有群成员发布内容和参与讨论</div>
            </div>
            
            <div class="permission-option">
              <div class="permission-title">
                <span>仅管理员可发言</span>
                <i class="fa fa-check-circle" style="color: var(--primary); display: none;"></i>
              </div>
              <div class="permission-desc">只有管理员可以发布内容</div>
            </div>
          </div>
          
          <div class="btn-group">
            <button class="btn btn-secondary prev-step" data-prev="2">
              <i class="fa fa-arrow-left"></i>
              <span>上一步</span>
            </button>
            <button class="btn btn-primary" id="createBtn3">
              <i class="fa fa-check"></i>
              <span>创建群组</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格4：简约风 -->
    <div id="style4" class="page-style">
      <!-- 结构与风格1相同，样式由CSS控制 -->
      <div class="page-header">
        <button class="header-btn" id="backBtn4">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">创建群组</h1>
        <button class="header-btn text-btn" id="skipBtn4">跳过</button>
      </div>
      
      <div class="page-content">
        <div class="steps-indicator">
          <div class="step-item active" data-step="1">
            <div class="step-number">1</div>
            <div class="step-title">信息</div>
          </div>
          <div class="step-item" data-step="2">
            <div class="step-number">2</div>
            <div class="step-title">成员</div>
          </div>
          <div class="step-item" data-step="3">
            <div class="step-number">3</div>
            <div class="step-title">权限</div>
          </div>
        </div>
        
        <div class="form-section active" id="section4-1">
          <!-- 内容与风格1相同 -->
          <div class="form-group">
            <label class="form-label">群组名称</label>
            <input type="text" class="form-control" placeholder="输入群组名称">
          </div>
          
          <div class="form-group">
            <label class="form-label">群组图标</label>
            <div class="group-icon-selector">
              <div class="icon-option selected" style="background-color: #E8F0FE; color: #4263EB;">
                <i class="fa fa-users"></i>
              </div>
              <div class="icon-option" style="background-color: #FEF3C7; color: #D97706;">
                <i class="fa fa-briefcase"></i>
              </div>
              <div class="icon-option upload-icon">
                <i class="fa fa-upload"></i>
              </div>
            </div>
          </div>
          
          <div class="btn-group">
            <button class="btn btn-secondary" disabled>上一步</button>
            <button class="btn btn-primary next-step" data-next="2">
              <span>下一步</span>
              <i class="fa fa-arrow-right"></i>
            </button>
          </div>
        </div>
        
        <div class="form-section" id="section4-2">
          <!-- 内容与风格1相同 -->
          <div class="contact-filter">
            <i class="fa fa-search filter-icon"></i>
            <input type="text" class="form-control" placeholder="搜索">
          </div>
          
          <div class="contact-list">
            <div class="contact-item">
              <img src="https://picsum.photos/100/100?random=3" alt="头像" class="contact-avatar">
              <div class="contact-info">
                <div class="contact-name">李华</div>
              </div>
              <div class="custom-checkbox checked">
                <i class="fa fa-check"></i>
              </div>
            </div>
            
            <div class="contact-item">
              <img src="https://picsum.photos/100/100?random=4" alt="头像" class="contact-avatar">
              <div class="contact-info">
                <div class="contact-name">赵伟</div>
              </div>
              <div class="custom-checkbox checked">
                <i class="fa fa-check"></i>
              </div>
            </div>
          </div>
          
          <div class="btn-group">
            <button class="btn btn-secondary prev-step" data-prev="1">
              <i class="fa fa-arrow-left"></i>
              <span>上一步</span>
            </button>
            <button class="btn btn-primary next-step" data-next="3">
              <span>下一步</span>
              <i class="fa fa-arrow-right"></i>
            </button>
          </div>
        </div>
        
        <div class="form-section" id="section4-3">
          <!-- 内容与风格1相同 -->
          <div class="form-group">
            <label class="form-label">群组类型</label>
            
            <div class="permission-option selected">
              <div class="permission-title">
                <span>公开群组</span>
                <i class="fa fa-check-circle" style="color: var(--primary);"></i>
              </div>
            </div>
            
            <div class="permission-option">
              <div class="permission-title">
                <span>私有群组</span>
                <i class="fa fa-check-circle" style="color: var(--primary); display: none;"></i>
              </div>
            </div>
          </div>
          
          <div class="btn-group">
            <button class="btn btn-secondary prev-step" data-prev="2">
              <i class="fa fa-arrow-left"></i>
              <span>上一步</span>
            </button>
            <button class="btn btn-primary" id="createBtn4">
              <i class="fa fa-check"></i>
              <span>创建</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 创建成功弹窗 -->
  <div class="success-modal" id="successModal">
    <div class="modal-content">
      <div class="success-icon">
        <i class="fa fa-check"></i>
      </div>
      <h3 class="modal-title">群组创建成功</h3>
      <p class="modal-message">您已成功创建群组，现在可以开始交流了</p>
      <button class="btn btn-primary" id="enterGroupBtn">进入群组</button>
    </div>
  </div>
  
  <!-- 顶部提示 -->
  <div class="toast" id="toastNotification">请选择至少一位成员</div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 风格切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的风格页面
        const styleId = this.getAttribute('data-style');
        document.querySelectorAll('.page-style').forEach(style => {
          style.style.display = 'none';
        });
        document.getElementById(styleId).classList.add('active');
        document.getElementById(styleId).style.display = 'flex';
        document.getElementById(styleId).style.flexDirection = 'column';
      });
    });
    
    // 返回按钮功能
    document.querySelectorAll('[id^="backBtn"]').forEach(btn => {
      btn.addEventListener('click', function() {
        showToast('返回上一页');
      });
    });
    
    // 跳过按钮功能
    document.querySelectorAll('[id^="skipBtn"]').forEach(btn => {
      btn.addEventListener('click', function() {
        const styleId = this.closest('.page-style').id;
        // 跳转到最后一步
        goToStep(styleId, 3);
      });
    });
    
    // 步骤导航功能
    document.querySelectorAll('.next-step').forEach(btn => {
      btn.addEventListener('click', function() {
        const styleId = this.closest('.page-style').id;
        const nextStep = this.getAttribute('data-next');
        
        // 第二步验证：至少选择一个成员
        if (nextStep == 3) {
          const checkedCount = this.closest('.form-section').querySelectorAll('.custom-checkbox.checked').length;
          if (checkedCount == 0) {
            showToast('请选择至少一位成员');
            return;
          }
        }
        
        goToStep(styleId, nextStep);
      });
    });
    
    document.querySelectorAll('.prev-step').forEach(btn => {
      btn.addEventListener('click', function() {
        const styleId = this.closest('.page-style').id;
        const prevStep = this.getAttribute('data-prev');
        goToStep(styleId, prevStep);
      });
    });
    
    // 跳转到指定步骤
    function goToStep(styleId, step) {
      const pageStyle = document.getElementById(styleId);
      
      // 更新步骤指示器
      pageStyle.querySelectorAll('.step-item').forEach(item => {
        const itemStep = item.getAttribute('data-step');
        item.classList.remove('active', 'completed');
        
        if (itemStep == step) {
          item.classList.add('active');
        } else if (itemStep < step) {
          item.classList.add('completed');
        }
      });
      
      // 显示对应步骤内容
      pageStyle.querySelectorAll('.form-section').forEach(section => {
        section.classList.remove('active');
      });
      pageStyle.querySelector(`#section${styleId.replace('style', '')}-${step}`).classList.add('active');
      
      // 滚动到顶部
      window.scrollTo(0, 0);
    }
    
    // 图标选择功能
    document.querySelectorAll('.icon-option').forEach(option => {
      if (!option.classList.contains('upload-icon')) {
        option.addEventListener('click', function() {
          // 移除同组其他选项的选中状态
          this.closest('.group-icon-selector').querySelectorAll('.icon-option').forEach(opt => {
            opt.classList.remove('selected');
          });
          // 设置当前选项为选中
          this.classList.add('selected');
        });
      }
    });
    
    // 联系人选择功能
    document.querySelectorAll('.custom-checkbox').forEach(checkbox => {
      checkbox.addEventListener('click', function() {
        this.classList.toggle('checked');
        const checkIcon = this.querySelector('i');
        
        if (this.classList.contains('checked')) {
          checkIcon.style.display = 'block';
        } else {
          checkIcon.style.display = 'none';
        }
      });
    });
    
    // 权限选项选择功能
    document.querySelectorAll('.permission-option').forEach(option => {
      option.addEventListener('click', function() {
        // 移除同组其他选项的选中状态
        this.closest('.form-group').querySelectorAll('.permission-option').forEach(opt => {
          opt.classList.remove('selected');
          opt.querySelector('.fa-check-circle').style.display = 'none';
        });
        // 设置当前选项为选中
        this.classList.add('selected');
        this.querySelector('.fa-check-circle').style.display = 'block';
      });
    });
    
    // 创建群组按钮功能
    document.querySelectorAll('[id^="createBtn"]').forEach(btn => {
      btn.addEventListener('click', function() {
        document.getElementById('successModal').classList.add('active');
      });
    });
    
    // 进入群组按钮功能
    document.getElementById('enterGroupBtn').addEventListener('click', function() {
      document.getElementById('successModal').classList.remove('active');
      showToast('进入群组聊天');
    });
    
    // 显示提示消息
    function showToast(message) {
      const toast = document.getElementById('toastNotification');
      toast.textContent = message;
      toast.classList.add('active');
      
      setTimeout(() => {
        toast.classList.remove('active');
      }, 2000);
    }
    
    // 初始化 - 隐藏所有风格，只显示默认风格
    document.querySelectorAll('.page-style').forEach(style => {
      if (!style.classList.contains('active')) {
        style.style.display = 'none';
      }
    });
  </script>
</body>
</html>
